<template>
  <div class="app-container">
    <!-- 使用说明文档弹窗 -->
    <el-dialog :show-close="false" title="使用说明文档" :visible.sync="dialogDocumentVisible" width="70%" :lock-scroll="true" custom-class="dialog-box" top="5vh">
      <el-link type="primary" :href="hrefurl" target="_blank">点击查看语雀文档<i class="el-icon-view el-icon--right"></i></el-link>
      <div style="width:100%;height: 100%;overflow:auto" v-loading="loading">
        <pdf
          v-for="i in numPages"
          :key="i"
          :src="pdfsrc"
          :page="i"
          style="width: 100%"
        ></pdf>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="text" @click="readClose" style="color:#67C23A">已读且不在弹出</el-button>
        <el-button type="text" @click="close" style="color:#909399">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import pdf from "vue-pdf";
export default {
  name: "pdfView",
  components: { pdf },
  props: {
    pdfurl: {
      type: String,
      default: ""
    },
    pdfcode: {
      type: String,
      default: ""
    },
    hrefurl: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      dialogDocumentVisible: false,
      pdfsrc: undefined,
      numPages: undefined,
      loading: false,
    };
  },
  async created() {
    let _status = localStorage.getItem(`${this.$props.pdfcode}Document`);
    if(_status == '1'){
      return;
    }
    this.loading = true;
    this.dialogDocumentVisible = true;
    if(this.$props.pdfurl){
      this.pdfsrc = pdf.createLoadingTask(this.$props.pdfurl);
      this.pdfsrc.promise.then((pdf) => {
        this.numPages = pdf.numPages;
        this.loading = false;
      });
    }
  },
  mounted() {
    
  },
  methods: {
    close(){
      this.dialogDocumentVisible = false;
      this.$emit("closePdf", false);
    },
    readClose(){
      this.dialogDocumentVisible = false;
      localStorage.setItem(`${this.$props.pdfcode}Document`, '1');
      this.$emit("closePdf", false);
    }
  },
};
</script>

<style>
.dialog-box{
  height: 90%;
  overflow: hidden;
}

.el-dialog__body{
  height: calc(100% - 120px);
}
</style>
